<template>
    <div class="main-title" style="margin-left: 30px;margin-bottom: 30px">
        物料产品分类管理
    </div>
  <!--    查询输入框和搜索按钮-->
    <div style="margin-left: 30px;margin-right: 30px">
        <el-input v-model="queryParams.name" placeholder="请输入分类名称" style="width: 200px;margin-right: 20px"/>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
    </div>
    <div style=" margin-bottom: 20px;margin-left: 30px;margin-right: 30px">
        <el-table
                :data="tableData"
                height="600"
                row-key="id"
                default-expand-all
        >
            <el-table-column prop="data" label="分类名称" sortable/>
            <el-table-column label="操作">
                <template #default="scope">
                    <div v-if="scope.row.id === 998">
                        <el-button type="primary" @click="handlerAdd(0)">添加产品子分类</el-button>
                    </div>
                    <div v-else-if="scope.row.id === 999">
                        <el-button type="primary" @click="handlerAdd(1)">添加物料子分类</el-button>
                    </div>
                    <div v-else>
                        <el-button @click="handleRename(scope.row)">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <!--    dialog-->
    <make-md-classify-dialog
            :visible="renameDialog"
            :classify="classify"
            @callClosed="renameDialog=false"
            @calledUpdateSuccess="handleReNameSuccess"

    />
    <make-add-classify-dialog
            :visible="addDialog"
            :type="queryParams.classify"
            @callClosed="handleAddDialogClosed"
            @calledAddSuccess="handleAddSuccess"
    />
</template>

<script>
import mdAPI from '../../util/request-md/mat-pro/mat-pro.js';
import MakeMdClassifyDialog from "../../components/widget/dialog/MakeMdClassifyDialog.vue";
import MakeAddClassifyDialog from "../../components/widget/dialog/MakeAddClassifyDialog.vue";

export default {
    name: 'protype.vue',
    components: {
        MakeMdClassifyDialog,
        MakeAddClassifyDialog
    },
    data() {
        return {
            renameDialog: false,
            addDialog: false,
            classify: {},
            queryParams: {
                name: '',
                value:'',
                classify: 1,
            },
            tableData: [
                {
                    id: 998,
                    data: '产品分类',
                    children: [],
                },
                {
                    id: 999,
                    data: '物料分类',
                    children: [],
                },
            ]
        }
    },
    methods: {
        loadClassifyData() {
            this.tableData[0].children = [];
            this.tableData[1].children = [];
            //加载数据
            mdAPI.getMatProClassify((res) => {
                if (res.code === 200) {
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].category === 0) {
                            this.tableData[0].children.push({
                                id: result[i].idClassify,
                                data: result[i].name,
                            });
                        } else {
                            this.tableData[1].children.push({
                                id: result[i].idClassify,
                                data: result[i].name,
                            });
                        }
                    }
                }
            });
        },
        handleRename(data) {
            console.log(data,">>>即将传入的data");
            this.classify = data;
            this.renameDialog = true;
        },
        handleReNameSuccess(data) {
            this.loadClassifyData();
            this.renameDialog = false;
        },
        handleDelete(data) {
            //提示是否真的要删除
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                mdAPI.deleteClassify({id: data.id}, (res) => {

                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                        this.loadClassifyData();
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败，请稍后再试'
                        });
                    }
                });
            });
        },
        handleAddDialogClosed() {
            this.addDialog = false;
        },
        //添加分类
        handlerAdd(category) {
            this.queryParams.classify = category;
            this.addDialog = true;
        },
        handleAddSuccess() {
            this.addDialog = false;
            this.loadClassifyData();
        },
        //搜索分类信息
        handleQuery(){
            mdAPI.findClassify(this.queryParams.name, (res) => {
                if (res.code === 200) {
                    this.tableData[0].children = [];
                    this.tableData[1].children = [];
                    if (res.data.length === 0){
                        this.$message.error("未查询到任何信息");
                        return;
                    }
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].category === 0) {
                            this.tableData[0].children.push({
                                id: result[i].idClassify,
                                data: result[i].name,
                            });
                        } else {
                            this.tableData[1].children.push({
                                id: result[i].idClassify,
                                data: result[i].name,
                            });
                        }
                    }
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            });
        }
    },
    mounted() {
        this.loadClassifyData();
    }
}
</script>

<style>

</style>